<template>
  <div class="upload-box">
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :limit="1"
      :file-list="fileList"
      :class="{disabled:fileList.length>0}"
      :on-remove="removeFn"
    >

      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="percent>0&&percent>100" type="circle" :percentage="percent" />
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDFI5brqZ1EAoBI8hyyiBNHwKRHrABvObX',
  SecretKey: 'g5D4ewyjJhofFYZLq54mDNFvKSJtEH3X'
})
export default {
  data() {
    return {
      fileList: [],
      percent: 0
    }
  },
  methods: {
    // 点击删除图片、
    removeFn() {
      this.fileList = []
    },
    uploadFn(data) {
      // 点击上传
      this.fileList = [{}]
      // console.log(22, data)
      cos.putObject({
        Bucket: 'hr-project-80-1314002050', /* 必须 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 */
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: progressData => {
          console.log(progressData)
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        console.log(33, err, data)
        if (!err) {
          this.fileList[0].url = 'https://' + data.Location
        }
      })
    }

  }
}
</script>

<style lang='scss' scoped>
.upload-box{
  position: relative;
    display: inline-block;
    .disabled{
      ::v-deep .el-upload{
        display: none;
      }
    }
    .el-progress{
      position:absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%)
    }
}
</style>
